<script>
import {
    ElTable, 
    ElTableColumn, 
    ElDialog,
    ElForm,
    ElFormItem,
    ElInput,
    ElRadioGroup,
    ElRadio,
    ElButton,
    ElDatePicker,
    ElMessageBox,
    ElMessage
} from 'element-plus';

import moment from 'moment';

const url = '/kaifamiao/student';

export default {
  name: 'student-list',
  components: {
    ElTable, 
    ElTableColumn, 
    ElDialog,
    ElForm,
    ElFormItem,
    ElInput,
    ElRadioGroup,
    ElRadio,
    ElButton,
    ElDatePicker,
    ElMessageBox,
    ElMessage
  },
  data() {
    return {
      students: [],
      visible: false,
      student: {
        id: '',
        name: '',
        gender: '',
        birthdate: '',
        hometown: ''
      }
    };
  },
  methods: {
    loadAll(){
      // 此处axios来自全局属性
      const p = this.axios.get(url);
      p.then( resp => resp.data )
       .then( ({students}) => this.students = students )
       .catch( error => console.log( error ) )
    },
    remove({id, name}) {
      ElMessageBox.confirm(`你确定删除${name}吗?`, '警告', {
        distinguishCancelAndClose: true,
        cancelButtonText: '取消',
        confirmButtonText: '确定'
      }).then( action => {
        console.log( 'action:', action );
        return this.axios.delete(url, { params: { id } })
      }).then( resp => {
        console.log( 'response: ', resp );
        return resp.data;
      }).then( ({success, message}) => {
        if(success) {
          ElMessage({ message: `已经成功删除${name}。`, type: 'success' });
          // 重新加载数据
          this.loadAll();
          return;
        }
        ElMessage({ message, type: 'warning' });
      }).catch( reason => {
        if( typeof reason === 'string' ) {
          console.log( 'action:', reason );
          return;
        }
        if( reason instanceof Error ) {
          ElMessage.error( '删除hi白' );
        }
      })
    },
    edit(row) {
      // 将表格中被编辑行的数据克隆到 this.student 对象
      Object.assign( this.student, row );
      // 让对话框显示出来
      this.visible = true;
    },
    cancel() {
      this.visible = false;
    },
    confirm() {
      ElMessageBox.confirm(`你确定修改该学生吗?`, '警告', {
        distinguishCancelAndClose: true,
        cancelButtonText: '取消',
        confirmButtonText: '确定'
      }).then( action => {
        console.log('action:', action);
        const entity = {...this.student};
        entity.birthdate = moment(entity.birthdate).format('YYYY-MM-DD');
        return this.axios.put(url, entity);
      }).then( resp => {
        let { success, message } = resp.data;
        if(success) {
          // 重新加载数据
          this.loadAll();
          // 隐藏对话框
          this.visible = false;
          return;
        }
        ElMessage({type: 'warning', message});
      }).catch( reason => {
        if( reason == 'cancel' ) {
          ElMessage({type:'warning', message: '已取消修改'});
          return;
        }
        if( reason instanceof Error ) {
          ElMessage.error('修改失败');
          console.log( reason );
        }
      })
    },
    detail({id}) {
      
    }
  },
  created() {
    this.loadAll();
  }
}
</script>

<template>
  <div class="student-list">
    <h3>学生列表</h3>
    <el-table :data="students" style="width: 100%" :stripe="true">
        <el-table-column type="index" label="序号" width="100" />
        <el-table-column prop="name" label="姓名" width="100" />
        <el-table-column prop="gender" label="性别" width="100" />
        <el-table-column prop="birthdate" label="出生日期" width="200" />
        <el-table-column prop="hometown" label="籍贯" />
        <el-table-column label="操作">
          <!--作用域插槽-->
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="detail(row)">详情</el-button>
            <el-button type="primary" size="small" @click="edit(row)">编辑</el-button>
            <el-button type="primary" size="small" @click="remove(row)">删除</el-button>
          </template>
        </el-table-column>
        <!--通过具名插槽(empty)分发内容-->
        <template #empty>
          暂无学生信息
        </template>
    </el-table>
    <!--对话框-->
    <el-dialog v-model="visible">
      <!--为具名插槽(header)分发内容-->
      <template #header>
        <b>修改学生信息</b>
      </template>
      <!--为默认的插槽(default)分发内容-->
      <template #default>
        <el-form :model="student" label-width="120px">
          <el-form-item label="姓名">
              <el-input v-model="student.name"></el-input>
          </el-form-item>
          <el-form-item label="性别">
              <el-radio-group v-model="student.gender">
                  <el-radio label="male" size="large">靓仔</el-radio>
                  <el-radio label="female" size="large">靓妹</el-radio>
              </el-radio-group>
          </el-form-item>
          <el-form-item label="出生日期">
              <el-date-picker v-model="student.birthdate" type="date" :editable="false" />
          </el-form-item>
          <el-form-item label="籍贯">
              <el-input v-model="student.hometown"></el-input>
          </el-form-item>
      </el-form>
      </template>
      <!--为具名插槽(footer)分发内容-->
      <template #footer>
        <el-button type="default" @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>